import { ReactNode } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'

interface Props
extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>{
  className?: string
  extra?: ReactNode
  errorMsg?: string
}

export default function Input({ className, extra, errorMsg, ...rest }: Props) {
  return (
    <div className={styles.root}>
      {/* <input placeholder={placeholder} className={classNames('input', className)} {...rest} /> */}
      <input className={classNames('input', className)} {...rest} />
      {extra && <div className='extra'> {extra} </div> }
      {errorMsg && <div className='validate'>{errorMsg}</div> }
    </div>
  )
}